<template>
  <el-container>
    <el-header>
      <h1>用户管理</h1>
    </el-header>
    <div style="display: flex ;margin-left: 500px">
      <el-input v-model="input1" style="width: 240px" placeholder="请输入用户手机号"/>
      <el-input v-model="input2" style="width: 240px" placeholder="请输入用户名" />
      <el-button :disabled="input1.length===0&&input2.length===0" @click='getUser'  type="primary">搜索</el-button></div>
    <el-main>
      <el-table :data="user" style="width: 100%" >
        <el-table-column prop="id" label="用户编号" width="100"></el-table-column>
        <el-table-column prop="name" label="用户名" width="120"></el-table-column>
        <el-table-column prop="images" label="用户头像" width="100">
          <img :src="user[0].images" alt="用户头像" style="width: 100px; height: 100px" v-if="user[0].images!==''">
        </el-table-column>
        <el-table-column prop="number" label="用户手机号" width="110"></el-table-column>
        <el-table-column prop="email" label="用户邮箱" width="150"></el-table-column>
        <el-table-column prop="experience" label="用户经验" width="100"></el-table-column>
        <el-table-column prop="money" label="用户钱包余额" width="110"></el-table-column>
        <el-table-column prop="creatTime" label="用户创建时间" width="150"></el-table-column>
        <el-table-column label="用户状态" width="180" >
          <div v-if="user[0].id!==''">
          <div v-if="user[0].status===1">封禁</div>
          <div v-if="user[0].status===0">正常</div></div>
          <el-select v-model="type" placeholder="选择状态" style="width: 150px" >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        </el-table-column>
        <el-table-column label="操作" width="100" >
            <el-button type="primary" :disabled="user[0].id===''" @click="tokeUser">提交</el-button>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script setup>

import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
const type = ref()


const options = [
  {
    value: 0,
    label: '正常',
  },
  {
    value: 1,
    label: '封禁',
  },
]


const user = ref([
  {
    id:'',
    name:'',
    number:'',
    email:'',
    experience: '',
    status:0,
    money:'',
    creatTime:'',
    images:''
  },
],)


const input1=ref('')
const input2=ref('')

//编辑用户状态
const tokeUser=()=>{
  ElMessageBox.confirm(
      '请问您确定要提交吗',
      '提醒',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await updateInfoByIdService(user.value[0].id,type.value)
        ElMessage({
          type: 'success',
          message: '操作成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消操作',
        })
      })
  setTimeout(()=>{
    getUser()
  },1000)

}


import {updateInfoByIdService, userInfoByIdService, userInfoByNameService, userInfoByNumberService} from "@/api/user";
const getUser=async ()=>{
  let result
  if (input1.value===''){
    console.log('aa')
    result=await userInfoByNameService(input2.value)
  }else {
    console.log('bb')
    result =await userInfoByNumberService(input1.value)
  }
  console.log(result.data)
  user.value[0] = result.data
}


</script>